<template>
  <div class="header acea-row row-between-wrapper">
    <a-icon :type="fold?'menu-unfold':'menu-fold'" class="menu-fold" @click="foldHandle"/>
    <div class="avatar acea-row row-middle" v-if="userInfo">
      <img :src="userInfo.pic" class="tx" alt="" v-if="userInfo.pic!=''">
      <a-avatar icon="user" :size="28" v-else/>
      <a-dropdown class="dropdown">
        <span class="nickname">{{userInfo.nickname!=''?userInfo.nickname:userInfo.username}}</span>
        <a-menu slot="overlay" >
          <a-menu-item>
            <a href="javascript:;" @click="userCenter">个人中心</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;" @click="outLogin">退出登入</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
      <modal title="个人中心" :show="show" @close="hideModal" width="600px">
        <a-form-model ref="formUserCenter" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="头像" prop="pic" >
            <a-upload
              name="tx"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :action="basePath+'/upload/tx'"
              @change="handleChange"
            >
              <img class="pic" v-if="form.pic" :src="form.pic" alt="avatar" />
              <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">
                  上传
                </div>
              </div>
            </a-upload>
          </a-form-model-item>
          <a-form-model-item label="账号" prop="username">
            <a-input v-model="form.username" disabled />
          </a-form-model-item>
          <a-form-model-item label="昵称" prop="nickname">
            <a-input v-model="form.nickname" />
          </a-form-model-item>
          <a-form-model-item label="新密码">
            <a-input-password v-model="form.password" />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="submit">提交</a-button>
          </a-form-model-item> 
        </a-form-model>
      </modal>
    </div>
  </div>
</template>

<script>
import Modal from 'components/common/modal'
import config from 'public/config/config.js'
import request from 'api/request'
export default {
  components:{
    Modal
  },
  data(){
    return{
      fold:false,
      show:false,
      loading:false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      basePath:config.basePath,
      form:{
        pic:'',
        username:'',
        nickname:'',
        password:''
      }
    }
  },
  computed: {
    userInfo(){
      return this.$store.state.admin.userInfo
    }
  },
  methods: {
    foldHandle:function(){
      this.fold = !this.fold
      this.$emit('toggleMenu')
    },
    userCenter:function(){
      let userInfo = JSON.parse(JSON.stringify(this.userInfo))
      this.form.pic = userInfo.pic
      this.form.username = userInfo.username
      this.form.nickname = userInfo.nickname
      this.form.password = ''
      this.show = true
    },
    hideModal:function(){
      this.show = false
    },
    handleChange:function(info){
      if (info.file.status === 'uploading') {
        this.loading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        let res = info.file.response
        this.loading = false;
        if(res.status == 200){
          this.form.pic = res.data.path
        }
      }
    },
    submit:function(){
      const that = this;
      let form = this.form;
      request.post("/admin/edit",form).then(e=>{
        if(e.status == 200){
          that.$message.success(e.msg)
          that.$store.commit('admin/setUserInfo',e.data[0])
          that.hideModal()
        }else{
          that.$message.error(e.msg)
        }
      })
    },
    outLogin:function(){
      this.$store.commit('admin/outLogin')
    }
  },
}
</script>

<style scoped>
  .header{
    height: 100%;
  }
  .header .menu-fold{
    font-size: 20px;
    padding: 0 20px;
  }
  .header .avatar .tx{
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
  .header .avatar .nickname{
    font-size: 14px;
    padding: 0 10px 0 10px;
    color: #515a6e;
    cursor: pointer;
  }
  .header .avatar .dropdown{
    margin-right: 5px;
  }
  .avatar-uploader {
    display: block;
  }
  .avatar-uploader .pic{
    width: 96px;
    height: 96px;
  }
</style>